'use strict';

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

//自定义组件（现在只有radio、以后会慢慢扩充其他组件，如checkbox、select...）
var FormComponent = function () {
	//构造
	function FormComponent(type, obj) {
		_classCallCheck(this, FormComponent);

		this.type = type; //表单类型
		this.obj = obj; //表单对象
		this.initAll();
	}

	//准备初始


	_createClass(FormComponent, [{
		key: 'initAll',
		value: function initAll() {
			if (this.type == 'radio') {
				this.initRadio();
			} else if (this.type == 'check') {
				this.initCheck();
			} else if (this.type == 'select') {
				this.initSelect();
			}
		}

		//Radio初始化

	}, {
		key: 'initRadio',
		value: function initRadio() {
			var obj = this.obj;
			var id = obj.attr('id'); //表单名称（如，姓名、年龄等）
			var val = obj.val(); //表单的值
			var myradio = $("div[data-ref='" + id + "']"); //表单对应的控件
			//控件选中初始化
			for (var i = 0; i < myradio.length; i++) {
				if (myradio.eq(i).attr('data-value') == val) {
					myradio.eq(i).addClass('myradioY');
				} else {
					myradio.eq(i).addClass('myradioN');
				}
				//控件内容追加
				myradio.eq(i).after("<span class='myradioT'>" + myradio.eq(i).attr('data-txt') + "</span>");
			}
		}

		//Radio点击事件

	}, {
		key: 'clickRadio',
		value: function clickRadio() {
			var obj = this.obj;
			var id = obj.attr('id'); //表单名称（如，姓名、年龄等）
			var val = obj.val(); //表单的值
			var myradio = $("div[data-ref='" + id + "']"); //表单对应的控件
			myradio.bind('click', function () {
				//点击当前radio变成选中样式,其它成为没选中状态
				$(this).attr('class', 'myradioY');
				$(this).siblings("div[data-ref='" + id + "']").attr('class', 'myradioN');
				//并把值放入id=ref匹配的val中，方便取值
				obj.val($(this).attr('data-value'));
			});
		}

		//Check初始化

	}, {
		key: 'initCheck',
		value: function initCheck() {
			var obj = this.obj;
			var id = obj.attr('id'); //表单名称（如，姓名、年龄等）
			var val = obj.val().split(','); //表单的值
			var mycheck = $("div[data-ref='" + id + "']"); //表单对应的控件
			//控件选中初始化

			for (var i = 0; i < mycheck.length; i++) {
				mycheck.eq(i).addClass('mycheckN');
				for (var j = 0; j < val.length; j++) {
					if (mycheck.eq(i).attr('data-value') == val[j]) {
						mycheck.eq(i).attr('class', 'mycheckY');
					}
				}
				//控件内容追加
				mycheck.eq(i).after("<span class='mycheckT'>" + mycheck.eq(i).attr('data-txt') + "</span>");
			}
		}

		//Check点击事件

	}, {
		key: 'clickCheck',
		value: function clickCheck() {
			var obj = this.obj;
			var id = obj.attr('id'); //表单名称（如，姓名、年龄等）
			var mycheck = $("div[data-ref='" + id + "']"); //表单对应的控件
			mycheck.bind('click', function () {
				var val = obj.val(); //表单的值
				var valArr = val.split(',');
				var that = $(this);
				var thatval = that.attr('data-value');

				//点击当前Check变成选中样式,其它成为没选中状态
				//[删除]
				if (that.attr('class') == 'mycheckY') {
					that.attr('class', 'mycheckN'
					//[if判断是不是第一个]
					);if (val.indexOf(thatval) != 0) {
						var temp = val.replace(',' + thatval, '');
						obj.val(temp
						//console.log("不是第一个")

						);
					} else {
						//[判断是不是只剩一个了]
						if (valArr.length > 1) {
							var temp = val.replace(thatval + ',', '');
							obj.val(temp);
						} else {
							var temp = val.replace(thatval, '');
							obj.val(temp);
						}
						obj.val(temp
						//console.log("是第一个")
						);
					}
					//console.log("删除")
				} else {
					//[增加]
					that.attr('class', 'mycheckY');
					if (val != '') {
						obj.val(val += ',' + thatval);
					} else {
						obj.val(val += thatval);
					}
					//console.log("增加")
				}

				//console.log(val)
			});
		}
	}, {
		key: 'initSelect',
		value: function initSelect() {
			var obj = this.obj;
			var id = obj.attr('id'); //表单名称（如，姓名、年龄等）
			var val = obj.val(); //表单的值
			var myselect = $("ul[data-ref='" + id + "']"); //表单对应的控件

			//把ul下边的伪option li都移动到一个大的容器里
			var selectItemContet = myselect.html("<div class='selectItemContet'>" + myselect.html() + "</div>"

			//给ui和li一个样式
			);var myselectItem = myselect.find('li');
			myselect.addClass('baseSlect');
			myselectItem.addClass('baseSlectItem');

			//向显示选中后的容器追加被选中内容
			var myselectShowTxt = '请选择';
			//控件选中初始化
			for (var i = 0; i < myselectItem.length; i++) {
				if (myselectItem.eq(i).attr('data-value') == val) {
					myselectShowTxt = myselectItem.eq(i).text();
				}
			}
			myselect.prepend("<div class='myselectShow'>" + myselectShowTxt + "</div>"); //追加一个显示选中后的容器

		}

		//Check点击事件

	}, {
		key: 'clickSelect',
		value: function clickSelect() {
			var obj = this.obj;
			var id = obj.attr('id'); //表单名称（如，姓名、年龄等）
			var val = obj.val(); //表单的值
			var myselect = $("ul[data-ref='" + id + "']"); //表单对应的控件
			var myselectItem = myselect.find('li');
			var selectItemContet = myselect.find('.selectItemContet'); //包含所有option的容器
			var myselectShow = myselect.find('.myselectShow'); //追加的那个显示选中后的容器

			myselectShow.bind('click', function () {
				selectItemContet.show();
			});
			myselectItem.bind('click', function () {
				selectItemContet.hide();
				obj.val($(this).attr('data-value'));
				myselectShow.text($(this).text());
			});
		}
	}]);

	return FormComponent;
}();